﻿{% extends "base.html" %}

{% block title %}电子病历标注{% endblock %}

{% block head %}
{{ super() }}
    <script src="../../static/js/jquery-1.11.3.min.js"></script>
    <script src="../../static/js/angular.js"></script>
    <script src="../../static/js/FileSaver.js"></script>
    <script src="../../static/js/annotation.js"></script>
{% endblock %}

{% block page_content %}

    <style>
        .sign{
            display: block;
            float: left;
            width: 20px;
            height: 20px;
        }
        #content{
            font-size: 14px;
            display: block;
            height: 250px;
            margin: 30px 0px 0px 0px;
            width: 80%;
            padding: 8px;
            background-color: white;
            border: 2px solid;
        }
        #content2,#content3{
            white-space: pre-wrap;
            word-break:break-all;
            word-wrap:break-word;
            font-size: 14px;
            margin: 30px 0px 0px 0px;
            border: 2px solid;
            border-radius: 5px;
            height: 250px;
            width: 80%;
            padding: 8px;
            overflow: auto;
        }
        .class1{
            background-color: orange;
            color: white;
        }
        .class2{
            background-color: green;
            color: white;
        }
        .class3{
            background-color: gray;
            color: white;
        }
        .class4{
            background-color: blue;
            color: white;
        }
        .class5{
            background-color: red;
            color: white;
        }
        .scroll-table{
            overflow-y: scroll;
            overflow-x: hidden;
            height: 550px;
            width:580px;
            margin-bottom: 10px;
        }
        tr span{
            display: block;
            height: 34px;
            width: 100%;
            padding: 6px 12px;
        }
        #hello{
            margin-bottom: 20px;
            /*float: right;*/
        }
        #logout{
            float: right;
        }
        .white{
            background-color: white;
        }
        .focus{
            background-color: #5bc0de;
        }
    </style>
    <div id="getUsername" class="hide">{{ current_user.username }}</div>
    {% raw %}
    <div class="row" ng-app="app" ng-controller="table">
            <div class="col-lg-7 col-md-8">
                <div>
                    <input type="file"id="readFile" class="hide" onchange="angular.element(this).scope().readFile()">
                    <!--<button class="btn-success" id="importFile">本地导入</button>-->
                    <button class="btn-success" id="loadFile" ng-click="loadFile()">导入病历</button>
                    <button class="btn-success" id="loadEntity" ng-click="loadEntity()">导入实体</button>
                    <input type="text" class="input-sm" style="width: 80px;" maxlength="8" id="fileId" value="1">
                </div>
                <div>
                    <textarea id="content" class="form-control" readonly></textarea>
                    <ul style="float: right; list-style: none ;">
                        <li><span style="background-color: orange;" class="sign"></span>症状和体征</li>
                        <li><span style="background-color: green;" class="sign"></span>检查和检验</li>
                        <li><span style="background-color: gray;" class="sign"></span>疾病和诊断</li>
                        <li><span style="background-color: blue;" class="sign"></span>治疗</li>
                        <li><span style="background-color: red;" class="sign"></span>身体部位</li>
                    </ul>
                    <div id="content2" onselectstart="return false" ng-show="aa"></div><!--禁止光标选中-->
                    <div id="content3" onselectstart="return false" ng-hide="aa"></div><!--禁止光标选中-->
                </div>
            </div>
            <div class="col-lg-5 col-md-4">
                <div>
                    <button class="btn-danger" ng-click="addEntity()">添加实体</button>
                    <div class="scroll-table">
                        <table class="table table-responsive" style="margin: 30px;">
                        <tr>
                            <td>实体</td>
                            <td>开始位置</td>
                            <td>结束位置</td>
                            <td>类别</td>
                            <td ng-show="!aa">次数</td>
                            <td>编辑</td>
                        </tr>
                        <tr ng-repeat="x in entityList" class="item">
                            <td>{{x.name}}</td>
                            <td class="pos_b">{{x.startPosition}}</td>
                            <td class="pos_e">{{x.endPosition}}</td>
                            <td>
                                <select ng-change="change()" ng-model="selectValue" class="form-control" ng-hide="!sel">
                                    <option ng-repeat="xx in categories" value="{{xx}}">{{xx}}</option>
                                </select>
                                <span ng-show="!sel" class="category">{{x.category}}</span>
                            </td>
                            <td ng-show="!aa">{{x.nums}}</td>
                            <td><button class="btn-default" ng-click="removeEntity()">删除</button></td>
                        </tr>
                    </table>
                    </div>
                    <!--<button ng-click="exportEntity()" class="btn-success">导出到本地</button>-->
                    <button ng-click="refreshEntity()" class="btn-danger" ng-show="allowEdit">修改实体</button>
                    <button ng-click="pushToDB()" class="btn-success" ng-show="aa">更新到数据库</button>
                    <button ng-click="pushChecked()" class="btn-default" ng-hide="aa">更新到数据库</button>
                    <button ng-click="reviewEntity()" class="btn-default">审核</button>
                </div>
            </div>
        </div>
    </div>
{% endraw %}
{% endblock %}